<!-- 选择地址 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择地址</title>
    <link rel="stylesheet" href="/static/app/css/common.css">
    <link rel="stylesheet" href="/static/app/css/choiceAddress.css">
    <script src="/static/app/js/common/common.js"></script>
</head>
<body>
    <!-- 遮罩层S -->
    <div class="mask" style="display:none;">
        <div class="dialog">
            <h2>您确定要删除此订单吗？</h2>
            <p style="padding:0.2rem 0 0.5rem 0;text-align: center;">删除订单后该订单将无法恢复</p>
            <p style="border-top:1px solid #f2f2f2;">
                <span style="border-right:1px solid #f2f2f2;" class="no">否</span>
                <span>是</span>
            </p>
        </div>
    </div>
    <!-- 遮罩层E -->
    <div class="container">
        <header class="header">
            <a href="./perfectInformation.html" class="pic">
                <img src="/static/app/images/icon_back2.png" alt="">
            </a>
            <span class="choice">选择地址</span>
            <span></span>
        </header>
        <section>
            <ul class="address">
                <li class="default">王可可<!-- <span>[默认地址]</span>--></li> 
                <li class="area">北京市朝阳区望京博泰大厦</li>
                <li class="three">
                    <ul>
                        <li>
                            <span id="unselected">
                                <img src="/static/app/images/unselected.png" alt="" id="pics">
                            </span>
                            <span>默认地址</span>
                        </li>
                        <li style="display:flex;padding-right:0.3rem;">
                            <p>
                                <span class="span"><img src="/static/app/images/bianji.png" alt=""></span>
                                <span style="font-size:0.24rem;" class="edit">编辑</span>
                            </p>
                            <p style="padding-left:0.6rem;">
                                <span class="span"><img src="/static/app/images/delete_icon.png" alt=""></span>
                                <span style="font-size:0.24rem;" class="btn">删除</span>
                            </p>
                        </li>  
                    </ul>
                </li>
            </ul>
            <button class="btns">添加地址</button>
        </section>
    </div>
</body>
<script src="/static/app/js/common/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 选择地址
        function change_pic(){
            var unselected = document.getElementById('unselected');
            var pics = document.getElementById("pics");
            unselected.onclick = function(){
                if(pics.getAttribute("src",2) == "/static/app/images/unselected.png"){
                    pics.setAttribute("src","/static/app/images/selected.png");
                }else{
                    pics.setAttribute("src","/static/app/images/unselected.png");
                };
            }
        }
        change_pic();
        
        $('.btn').on("click",function(){
            $(".mask").fadeIn(800)
        })
        $(".no").on('click',function(){
            $(".mask").fadeOut(800)
        })
        $(".edit").click(function(){
            window.location.href = "/static/app/html/editAddress.html"
        })
        
    })
</script>
</html>